<template>
    <div id="Comprehensive">
        <el-card class="box-card">
            医生名称: <el-input class="change-button" v-model="name" placeholder="请输入查询名字" clearable />
            医生科室: <el-input class="change-button" v-model="department" placeholder="请输入科室" clearable />
            <el-button type="primary" class="elbutton" @click="find">查询</el-button>
            <div class="lists"> <el-table :data="list" style="width: 100%">
                    <el-table-column prop="name" label="医生姓名" width="180" />
                    <el-table-column prop="department" label="所属科室" width="180" />
                    <el-table-column prop="address" label="医生头像">
                        <template #default="{ row }">
                            <img class="img" :src="row.head" alt="">
                        </template>
                    </el-table-column>
                    <el-table-column prop="phone" label="联系方式" width="180" />
                    <el-table-column prop="sex" label="性别" width="180" />
                     <el-table-column  label="操作" width="200" >
                  <template #default="{ row }">

                    <el-button type="primary" :icon="Edit"  @click="change(row)">
                            修改
                        </el-button>
                        <el-button type="warning" @click="changeDay(row)"  :icon="Star" >
                            排班
                        </el-button>
                  </template>
                     </el-table-column>
                </el-table>
            </div>
            <div class="tbas">
                <div class="demo-pagination-block">
                    <el-pagination v-model:current-page="page" v-model:page-size="size" :page-sizes="[1, 50, 100, 200]"
                        :small="small" :disabled="disabled" :background="background"
                        layout="total, sizes, prev, pager, next, jumper" :total="total" @size-change="handleSizeChange"
                        @current-change="handleCurrentChange" />
                </div>
            </div>
        </el-card>
    </div>
</template>

<script setup lang="ts">
import { onMounted, ref, reactive, watchEffect,  computed } from 'vue';

import {

  Edit,

  Star,
} from '@element-plus/icons-vue'
import { useStore } from 'vuex';

import {useRouter} from 'vue-router'
const page = ref(1)
const size = ref(10)
const small = ref(false)
const background = ref(true)
const disabled = ref(false)
const store = useStore()
const name = ref('')
const department = ref('')
onMounted(() => {
    store.dispatch('jjy/A_list', { page: page.value, size: size.value })
})
//每页多少数据
const handleSizeChange = (val: number) => {
    store.dispatch('jjy/A_list', { page: page.value, size: size.value })
}
//第几页
const handleCurrentChange = (val: number) => {
    console.log(val);
    store.dispatch('jjy/A_list', { page: page.value, size: size.value })
}
//排班
const router=useRouter()
//修改资料
function change(data){
    store.commit('jjy/M_doctor',data)
    console.log(data);
    router.push('/doctor/edit')
}
//修改排班
function changeDay(data){
   
    localStorage.setItem('id',data.id)
    router.push('/doctor/scheduling')
}
const list = computed(() => {
    return store.state.jjy.list.data
})
const total = computed(() => {
    return store.state.jjy.list.total
})
//查找
function find() {
    let data: any = { page: page.value, size: size.value }
    // data[name.value]=name.value
    if (name.value) data.name = name.value
    if (department.value) data.sort = department.value
    store.dispatch('jjy/A_list', data)
}
</script>

<style scoped lang="scss">
#Comprehensive {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
}

.img {
    width: 30px;
    height: 30px;
}

.lists {
    max-height: 600px;
    overflow-y: scroll;
}

:deep .change-button {
    width: 200px;
    text-indent: 20px;
}

.elbutton {
    margin-left: 50px;
}
</style>